{extend name="mainadmin@layouts/base" /}
{block name="head" }
<link href="__STATIC__/main/css/stylesheets/uploadify/uploadify.min.css" rel="stylesheet"/>
<link href="__STATIC__/main/css/stylesheets/page/goods.css?v=1" rel="stylesheet"/>
<link rel="stylesheet" href="__STATIC__/js/jquery/jquery_ui/jquery-ui.css">
<script src="__STATIC__/js/jquery/jquery_ui/jquery-ui.js"></script>
<style>
    @font-face{

        　　font-family:'msyhbd';
        　　src:url('__STATIC__/share/msyhbd.ttc');

    }

    #share_img_box{
        font-family:'msyhbd';
        width:375px;height: 666px; border: 1px solid #000;
        overflow: hidden;
        position: relative;
    }
    #share_bg_img{width: 100%;}
    #share_img_box .share_qrcode{ border: 1px dashed #000;position: absolute; z-index: auto; user-select: auto;}
    #share_img_box .share_avatar{position: absolute;cursor:default;  border:1px dashed #000;position: absolute; z-index: auto; user-select: auto;}
    #share_img_box .share_nick_name{position: absolute;cursor:default; border:1px dashed #000;position: absolute;font-weight: bold;z-index: auto; user-select: auto;}
    .circle{border-radius: 50%;}
    #share_img_box .share_avatar span{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 12px;
        background-color: #ddd;
        overflow: hidden;
    }
    .vselect{
        width: 80px;
        height: 80px;
        border: 1px dotted #999999;
        text-align: center;
        line-height: 74px;
        cursor: pointer;
    }
    .vselect span{
        font-size: 38px;
        color: #e1e1e1;
    }
    .goods-list{

    }
    .goods-list .img{
        margin-right: 10px;
        position: relative;
    }
    .goods-list .del{
        position: absolute;
        bottom: 0;
        left: 0px;
        background: rgba(0, 0, 0, 0.5);
        color: #FFF;
        width: 100%;
        text-align: center;
        font-size: 12px;
        padding: 2px 0;
        cursor: pointer;
    }
    .goods-lists .img{
         margin-right: 10px;
         position: relative;
     }
    .goods-lists .del{
        position: absolute;
        bottom: 0;
        left: 0px;
        background: rgba(0, 0, 0, 0.5);
        color: #FFF;
        width: 100%;
        text-align: center;
        font-size: 12px;
        padding: 2px 0;
        cursor: pointer;
    }

    .award{
        margin-bottom: 5px;
    }
    .award .add-award{
        background: #0D9CD5;
        color: #FFF;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
        margin-left: 20px;
        cursor: pointer;
    }
    .award .del-award{
        background: #e89494;
        color: #FFF;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
        margin-left: 20px;
        cursor: pointer;
    }
    .add-xingji{
        background: #0D9CD5;
        color: #FFF;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
        margin-left: 20px;
        cursor: pointer;
    }
    .del-xingji{
        background: #e89494;
        color: #FFF;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
        margin-left: 20px;
        cursor: pointer;
    }
</style>
{/block}
{block name="main" }

<header>
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="fa fa-ellipsis-v"></i>
                <strong>设置</strong>
            </li>
        </ul>
        <div style="float:right; padding-right:10px;">
            <a class="refresh" id="refresh-toggler" href=""><i class="fa fa-refresh"></i></a>
        </div>
    </div>
</header>
<form class="form-horizontal form-validate form_vbox" id="_form" method="post" action="{:url('save')}">
    <section class="vbox">
        <section class="scrollable  wrapper w-f">
            <section class="panel panel-default ">
                <header>
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#basic" data-toggle="tab">团队奖励</a>
                        </li>
                        <li class="">
                            <a href="#xingji" data-toggle="tab">星级奖励</a>
                        </li>
                    </ul>
                </header>

                <div class="tab-content ">
                    <div class="tab-pane active" id="basic">
                        <div class="form-group m-t">
                            <label class=" control-label">是否开启：</label>
                            <div class="controls">
                                <label class="radio-inline">
                                    <input name="open_team" value="0" {$setting['open_team']==0?'checked':''} type="radio"
                                    >停用
                                </label>
                                <label class="radio-inline">
                                    <input name="open_team" value="1" {$setting['open_team']==1?'checked':''} type="radio">启用
                                </label>
                            </div>
                        </div>
                        <div class="form-group m-t">
                            <label class=" control-label">参与商品：</label>
                            <div class="controls" style="display: flex">
                                <div class="goods-list" style="display: flex">
                                    {volist name="$setting['team']['goods']" id="vo" }
                                    <div class="img">
                                        <input type="hidden" name="goods_id[]" value="{$vo.goods_id}">
                                        <input type="hidden" name="goods_img[]" value="{$vo.goods_img}">
                                        <img src="{$vo.goods_img}" style="width: 80px;height: 80px;">
                                        <span class="del" onclick="del(this)">删除</span>
                                    </div>
                                    {/volist}
                                </div>
                                <div class="vselect" data-toggle="ajaxModal" data-remote="{:url('sys_admin.ladder/selectGoods',array('type'=>1))}">
                                    <span>+</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group m-t">
                            <label class=" control-label">奖励设置：</label>
                            <div class="col-sm-8 controls">
                                {volist name="$setting['team']['config']" key="k" id="vo" }
                                <div class="award">
                                    订单 <input type="text" name="min_order_num[]" class="input-mini valid" value="{$vo.min_order_num}">
                                    -<input type="text" name="max_order_num[]" class="input-mini valid" value="{$vo.max_order_num}"> 单，
                                    奖励 <input type="text" name="award_amount[]" class="input-mini valid" value="{$vo.award_amount}"> 元
                                    {if condition="$k == 1"}
                                    <span class="add-award">+</span>
                                    {else}
                                    <span class="del-award" onclick="delAward(this)">-</span>
                                    {/if}
                                </div>
                                {/volist}

                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="xingji">
                        <div class="form-group m-t">
                            <label class=" control-label">是否开启：</label>
                            <div class="controls">
                                <label class="radio-inline">
                                    <input name="open_star" value="0" {$setting['open_star']==0?'checked':''} type="radio"
                                    >停用
                                </label>
                                <label class="radio-inline">
                                    <input name="open_star" value="1" {$setting['open_star']==1?'checked':''} type="radio">启用
                                </label>
                            </div>
                        </div>
                        <div class="form-group m-t">
                            <label class=" control-label">参与商品：</label>
                            <div class="controls" style="display: flex">
                                <div class="goods-lists" style="display: flex">
                                    {volist name="$setting['star']['goods']" id="vo" }
                                    <div class="img">
                                        <input type="hidden" name="x_goods_id[]" value="{$vo.goods_id}">
                                        <input type="hidden" name="x_goods_img[]" value="{$vo.goods_img}">
                                        <img src="{$vo.goods_img}" style="width: 80px;height: 80px;">
                                        <span class="del" onclick="del(this)">删除</span>
                                    </div>
                                    {/volist}
                                </div>
                                <div class="vselect" data-toggle="ajaxModal" data-remote="{:url('sys_admin.ladder/selectGoods',array('type'=>2))}">
                                    <span>+</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group m-t">
                            <label class=" control-label">星级设置：</label>
                            <div class="col-sm-8 controls">
                                <table class="table table-bordered  table-hover">
                                    <thead class="flip-content bordered-palegreen">
                                    <tr>
                                        <th>星级ID</th>
                                        <th>星级名称</th>
                                        <th>条件</th>
                                        <th>奖励</th>
                                        <th>封顶</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {volist name="$setting['star']['config']" key="k" id="vo" }
                                    <tr>
                                        <td>
                                            <input type="text" name="level[]" class="input-mini valid" value="{$vo.level}"/>
                                        </td>
                                        <td>
                                            <input type="text" name="name[]" class="input-mini valid" value="{$vo.name}"/>
                                        </td>
                                        <td>
                                            <input type="hidden" name="zt_role_id[]" value="{$vo.zt_role_id}">
                                            <input type="hidden" name="team_role_id[]" value="{$vo.team_role_id}">
                                            直推 <input type="text" name="zt[]" class="input-mini valid" value="{$vo.zt}"/> 联创，
                                            团队 <input type="text" name="team[]" class="input-mini valid" value="{$vo.team}"/> 代理
                                        </td>
                                        <td>
                                            <input type="text" name="brokerage[]" class="input-mini valid" value="{$vo.brokerage}"/> 元
                                        </td>
                                        <td>
                                            <input type="text" name="brokerage_limit[]" class="input-mini valid" value="{$vo.brokerage_limit}"/> 元
                                        </td>
                                        <td>
                                            {if condition="$k == 1"}
                                            <span class="add-xingji">+</span>
                                            {else}
                                            <span class="del-xingji" onclick="delXingji(this)">-</span>
                                            {/if}
                                        </td>
                                    </tr>
                                    {/volist}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
        <footer class="footer bg-white b-t p-t">
            <div class="form-group">
                <div class="controls  col-sm-offset-1">
                    <button type="submit" class="btn btn-primary" data-loading-text="保存中...">保存</button>
                </div>
            </div>
        </footer>
    </section>
</form>

<script type="text/javascript">
    var ids = new Array();
    var idss = new Array();
    function updateShareBg(img){
        $('#share_bg_img').attr("src",img.image.path);
    }
    $('.add-award').on('click',function (){
        $(this).parent().parent().append('<div class="award">\n' +
            '订单 <input type="text" name="min_order_num[]" class="input-mini valid" value="">\n' +
            '-<input type="text" name="max_order_num[]" class="input-mini valid" value=""> 单，\n' +
            '奖励 <input type="text" name="award_amount[]" class="input-mini valid" value=""> 元\n' +
            '<span class="del-award" onclick="delAward(this)">-</span>\n' +
            '</div>')
    })
    $('.add-xingji').on('click',function (){
        $(this).parent().parent().parent().append('<tr>\n' +
            '<td>\n' +
            '<input type="text" name="level[]" class="input-mini valid"/>\n' +
            '</td>\n' +
            '<td>\n' +
            '<input type="text" name="name[]" class="input-mini valid"/>\n' +
            '</td>\n' +
            '<td>\n' +
            '<input type="hidden" name="zt_role_id[]" value="14">\n' +
            '<input type="hidden" name="team_role_id[]" value="1">\n' +
            '直推 <input type="text" name="zt[]" class="input-mini valid"/> 联创，\n' +
            '团队 <input type="text" name="team[]" class="input-mini valid"/> 代理\n' +
            '</td>\n' +
            '<td>\n' +
            '<input type="text" name="brokerage[]" class="input-mini valid"/> 元\n' +
            '</td>\n' +
            '<td>\n' +
            '<input type="text" name="brokerage_limit[]" class="input-mini valid"/> 元\n' +
            '</td>\n' +
            '<td>\n' +
            '<span class="del-xingji" onclick="delXingji(this)">-</span>\n' +
            '</td>\n' +
            '</tr>')
    })
    function delXingji(obj){
        $(obj).parent().parent().remove()
    }
    function delAward(obj){
        $(obj).parent().remove()
    }
    function del(obj){
        $(obj).parent().remove()
    }
    function aa(){
        $('input[name="goods_ids"]:checked').each(function(){
            console.log($(this).val())
            if (ids.indexOf(Number($(this).val())) === -1) {
                ids.push(Number($(this).val()))
                $('.goods-list').append('<div class="img">\n' +
                    '<input type="hidden" name="goods_id[]" value="'+$(this).val()+'">\n' +
                    '<input type="hidden" name="goods_img[]" value="'+$(this).data('img')+'">\n' +
                    '<img src="'+$(this).data('img')+'" style="width: 80px;height: 80px;">\n' +
                    '<span class="del" onclick="del(this)">删除</span>\n' +
                    '</div>')
            }
        });
        $('.modal-dialog').remove()
        $('.modal-backdrop').remove()
        $('#ajaxModal').hide()
    }
    function bb(){
        $('input[name="goods_ids"]:checked').each(function(){
            if (idss.indexOf(Number($(this).val())) === -1) {
                idss.push(Number($(this).val()))
                $('.goods-lists').append('<div class="img">\n' +
                    '<input type="hidden" name="x_goods_id[]" value="'+$(this).val()+'">\n' +
                    '<input type="hidden" name="x_goods_img[]" value="'+$(this).data('img')+'">\n' +
                    '<img src="'+$(this).data('img')+'" style="width: 80px;height: 80px;">\n' +
                    '<span class="del" onclick="del(this)">删除</span>\n' +
                    '</div>')
            }
        });
        $('.modal-dialog').remove()
        $('.modal-backdrop').remove()
        $('#ajaxModal').hide()
    }
    $(function() {
        $('.share_img_list img').on('click',function () {
            $('#share_bg_img').attr("src",$(this).attr('src'));
        })
        //二维码处理
        $(".share_qrcode").draggable({containment:'#share_img_box',stop: function( event, ui ) {
            //console.log(ui);
            $("input[name='setting[share_qrcode_xy]']").val(ui.position.left+','+ui.position.top);
        }}).resizable({containment:'#share_img_box',stop: function( event, ui ) {
            //console.log(ui);
            $("input[name='setting[share_qrcode_width]']").val(ui.size.width);
            $(".share_qrcode").css({'height':ui.size.width+'px'});
        }})
        var share_qrcode_xy = '{$setting.share_qrcode_xy}';
        share_qrcode_xy = share_qrcode_xy.split(',');
        $(".share_qrcode").css({
                'left':share_qrcode_xy[0]+'px',
                'top':share_qrcode_xy[1]+'px',
                'width':{$setting.share_qrcode_width}+'px',
                'height':{$setting.share_qrcode_width}+'px',
        }).removeClass('hide');

        //头像处理
        $(".share_avatar").draggable({containment:'#share_img_box',stop: function( event, ui ) {
            //console.log(ui);
            $("input[name='setting[share_avatar_xy]']").val(ui.position.left+','+ui.position.top);
        }}).resizable({containment:'#share_img_box',stop: function( event, ui ) {
            //console.log(ui);
            $("input[name='setting[share_avatar_width]']").val(ui.size.width);
            $(".share_avatar").css({'height':ui.size.width+'px'});
        }});
        var share_avatar_xy = '{$setting.share_avatar_xy}';
        share_avatar_xy = share_avatar_xy.split(',');
        $(".share_avatar").css({
                'left':share_avatar_xy[0]+'px',
                'top':share_avatar_xy[1]+'px',
                'width':{$setting.share_avatar_width}+'px',
                'height':{$setting.share_avatar_width}+'px',
        }).removeClass('hide');
        $('.share_avatar_shape').click(function () {
            if ($(this).val() == 0){
                if ($(".share_avatar span").hasClass('circle')){
                    return false;
                }
                $(".share_avatar span").addClass('circle');
            }else{
                $(".share_avatar span").removeClass('circle');
            }
        })

        //呢称处理
        $(".share_nick_name").draggable({containment:'#share_img_box',stop: function( event, ui ) {
            //console.log(ui);
            $("input[name='setting[share_nick_name_xy]']").val(ui.position.left+','+ui.position.top);
        }});
        var share_nick_name_xy = '{$setting.share_nick_name_xy}';
        share_nick_name_xy = share_nick_name_xy.split(',');
        $(".share_nick_name").css({
                'left':share_nick_name_xy[0]+'px',
                'top':share_nick_name_xy[1]+'px',
                'font-size':{$setting.share_nick_name_size}+'px',
                'color':'{$setting.share_nick_name_color}',
        }).removeClass('hide');
        //监听文本框
        $("input[name='setting[share_nick_name_color]']").on('input propertychange', function() {
            $(".share_nick_name").css({'color':$(this).val()});

        });
        $("input[name='setting[share_nick_name_size]']").on('input propertychange', function() {
            $(".share_nick_name").css({'font-size':$(this).val()+'px'});

        });

    })
    var arrival_code = Math.ceil(Math.random() * 1000) + 1000;
    $('#sarrival_code_em').html(arrival_code);
    $('#evalArrival').click(function () {
        var _arrival_code = $('#arrival_code').val();
        if (_arrival_code == '') {
            _alert('请输入校验码，后再操作.', true);
            return false;
        }
        if (_arrival_code != arrival_code) {
            _alert('校验码为' + arrival_code + '，请核实输入是否正确.', true);
            return false;
        }
        _confirm('确定执行 - 手动执行结算？', function () {
            jq_ajax('{:url("evalArrival")}', '', function (res) {
                _alert(res.msg, true);
            });
        });
    })
    $('#show_share_img').click(function () {
        var obj = this;
        $(obj).html('预览图生成中..');
        var data = $('#_form').toJson();
        jq_ajax('{:url("mergeShareImg")}',data,function(){
            $(obj).html('点击预览效果');
            window.open("/upload/share_bg/test_share.jpg?"+ Math.random());
        })
    })
</script>

{/block}
{block name="footer" }
<script type="text/javascript">
    seajs.use(["dist/plupload/init.js", "dist/goods/init.js"])
</script>
{/block}
